<template>
    <div class="monitor-target-box" @dragend="dragendHandler">
        <div v-for="object in targets" :key="object">
            <div class="title">
                {{ object.title }}
            </div>
            <div
                v-for="name in object.items"
                :key="name"
                class="name"
                :data-label="name"
                :draggable="true"
            >
                {{ name }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        targets: Object,
    },
    methods: {
        dragendHandler(event) {
            console.log('dragendHandler')
            this.$emit('canvas-add-node', event)
        },
    },
}
</script>

<style>
.monitor-target-box {
    width: 300px;
    border: 1px solid #f1f1f1;
    padding: 20px;
    margin-right: 20px;
}
.title {
    text-align: left;
    margin-bottom: 20px;
}
.name {
    text-align: center;
    margin-bottom: 20px;
    background-color: #e6f6ee;
    height: 30px;
    border: 1px solid #ccd8ae;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}
</style>